import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { actions, getBanner } from "../../store/modules/mine";
import { bindActionCreators } from "redux";
// import "./Cate.css";
import { Carousel, WingBlank } from 'antd-mobile';

// import './Home.css'
class Mine extends PureComponent {
  render() {
    let { banner } = this.props;
    // console.log(banner);
    return (
      <div className="Mine_banner">
          <WingBlank>
        <Carousel
          autoplay={false}
          infinite
          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          afterChange={index => console.log('slide to', index)}
        >
          {banner?banner.map(val => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{ display: 'inline-block', width: '100%', height: '100px', }}
            >
              <img
              key={val.id}
                src={val.img}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          )):null}
        </Carousel>
      </WingBlank>
      </div>
    );
  }
  componentDidMount() {
    let { reqBanner } = this.props.mine;
    reqBanner();
    
  }
}
//收数据
let mapStateToProps = (state) => ({
  banner: getBanner(state),
});
//收方法
let mapDispatchToProps = (dispatch) => ({
  mine: bindActionCreators(actions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(Mine);
